<template>
  <div class="customerrecord">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>拜访记录</span>
      <p @click="newbf">新增</p>
    </div>
    <van-search
      v-model="value"
      shape="round"
      background="#ffffff"
      placeholder="客户名称/拜访标题"
      :show-action="right"
      action-text="搜索"
    />
    <div class="contente">
      <div
        class="box"
        v-for="(itme, index) in arr"
        :key="index"
        @click="details(itme)"
      >
        <div class="left">
          <img src="../assets/总图标包含整个系统的/Customer.png" />
          <div class="textt">
            <p><span>拜访标题</span> {{ itme.visitTitle }}</p>
            <p><span>客户姓名</span> {{ itme.custName }}</p>
            <p><span>拜访时间</span> {{ itme.visitTime.slice(0, 10) }}</p>
          </div>
        </div>
        <div class="right">
          <div class="lgo">定期回访</div>
        </div>
      </div>
      <div class="btn" @click="morefn">展开更多</div>
    </div>
  </div>
</template>
 
<script>
import { GetLoginApiListXList } from "../request/aip";
export default {
  data() {
    return {
      value: "",
      right: true,
      //   每页条数
      size: 5,
      //   总数据
      arr: [],
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    newbf() {
      this.$router.push("/customeradd");
    },
    morefn() {
      this.size += 3;
      GetLoginApiListXList({
        current: "1",
        size: String(this.size),
      }).then((res) => {
        // console.log(res.data.records);
        this.arr = res.data.records;
      });
    },
    details(itme) {
      this.$router.push({ name: "Customerrecorddetails", params: { itme } });
    },
  },
  created() {
    this.size = 5;
    GetLoginApiListXList({
      current: "1",
      size: this.size,
    }).then((res) => {
      //   console.log(res.data.records);
      this.arr = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.customerrecord {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  .van-search {
    margin-bottom: 10px;
  }
  .contente {
    background-color: #fff;
    padding: 10px 10px 0;
    .box {
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      .left {
        display: flex;
        img {
          width: 60px;
          margin-right: 10px;
        }
        .textt {
          p {
            font-size: 14px;
            margin-bottom: 3px;
            span {
              color: #ccc;
              margin-right: 10px;
            }
          }
        }
      }
      .right {
        height: 50px;
        .lgo {
          color: #fecb8c;
          border: 1px solid #fecb8c;
          font-size: 12px;
          background-color: #fff7e7;
          margin-right: 18px;
        }
      }
    }
    .btn {
      padding: 10px;
      text-align: center;
      color: #023293;
      font-size: 14px;
    }
  }
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
}
</style>